@extends('admin.layouts.master')

@section('pagecss')
<link rel="stylesheet" type="text/css" href="/admin/assets/bootstrap-daterangepicker/daterangepicker.css" />
@endsection

@section('content')

<div class="row aw-list">
	<div class="col-md-12">
		<section class="row form-inline aw-list-head">
			<div class="col-sm-4">
				<div class="aw-head-add">
					<button class="btn btn-gules" v-on:click="List_Edit_Layer('add')"><i class="icon-plus"></i> 添加优惠券</button>
				</div>
			</div>
		</section>
	</div>
	<div class="col-lg-12">
		<section class="panel aw-content">
			<header class="panel-heading">优惠券列表</header>
			<table class="table table-striped dataTable table-hover">
				<thead>
					<tr>
						<th>编号</th>
						<th>名称</th>
						<th>优惠金额</th>
						<th>有效时间段</th>
						<th>操作</th>
					</tr>
				</thead>
				<tbody>
					<tr v-for="(list, key) in lists" :data-key="key" :data-id="list.id">
						<td>@{{list.id}}</td>
						<td>@{{list.name}}</td>
						<td>@{{list.money}}</td>
						<td>@{{list.start_time}} - @{{list.end_time}}</td>
						<td>
							<a class="btn btn-blue btn-xs" :href="'/admin/coupon/info?page_id=20&id='+list.id">
								<i class="icon-gift"></i> 派发
							</a>
							<button class="btn btn-green btn-xs" v-on:click="List_Edit_Layer(list.id,key)">
								<i class="icon-pencil"></i> 编辑
							</button>
							<button class="btn btn-gules btn-xs" v-on:click="List_Del(list.id,list.name)">
								<i class="icon-trash"></i> 删除
							</button>
						</td>
					</tr>
				</tbody>
			</table>
			<div class="aw-text-center aw-list-null" v-if="lists.length==0">暂无数据</div>
			<vue-page :page_item="page_item" :page_this="page_this" :page_all="page_all" :Call_back="Call_back"></vue-page>
			<div class="col-md-12 aw-hide Js-layer-edit">
				<div class="aw-layer-edit-icon aw-layer-edit-station">
					<div class="form-group">
						<label class="control-label">名称：</label>
						<div class="">
							<input class="form-control" type="text" placeholder="请输入优惠券名称" id="name" name="name" v-model="form.name" v-bind:value="form.name">
						</div>
					</div>
					<div class="form-group">
						<label class="control-label">优惠金额：</label>
						<div class="">
							<input class="form-control" type="text" placeholder="请输入优惠金额" id="money" name="money" v-model="form.money" v-bind:value="form.money">
						</div>
					</div>
					<input class="aw-hide" type="text" v-model="form.start_time" v-bind:value="form.start_time">
					<input class="aw-hide" type="text" v-model="form.end_time" v-bind:value="form.end_time">
					<div class="form-group">
						<label class="control-label">有效时间段：</label>
						<div class="">
							<input class="form-control" type="text" placeholder="请选择有效时间段" id="time" name="time" v-model="form.time" v-bind:value="form.time">
						</div>
					</div>
					<div class="col-md-12 aw-content-btn">
						<a class="btn btn-gules Js-layer-edit-btn" href="javascript:;" v-on:click="List_Save()">保存</a>
						<a class="btn btn-gray Js-layer-colse" data-id="add" href="javascript:;">取消</a>
					</div>
				</div>
			</div>
		</section>
	</div>
</div>

@section('pagejs')
@parent

<!--日期插件-->
<script type="text/javascript" src="/admin/assets/bootstrap-daterangepicker/date.js"></script>
<script type="text/javascript" src="/admin/assets/bootstrap-daterangepicker/daterangepicker.js"></script>

<script type="text/javascript" src="/admin/js/vue-page.js"></script>
<script type="text/javascript" src="/admin/js/page.js"></script>
<script type="text/javascript">
var MJS_URLArry=URLArry;
var AD_list={
	api:'/adminapi/coupon/list',
	form_data:MJS_URLArry,
	tips:false,
}
//默认数据
function VD_form(){
	return data={id:'',name:'',money:'',start_time:'',end_time:'',time:''}
}
var Ajax_Vue_Fun=function(vue_data){
	console.log('vue_data')
	console.log(vue_data)
	var Data_Vue=ajax_data_res(vue_data)
	Data_Vue.form={};//添加默认数据
	vm=new Vue({
		el:'#Vue-Body',
		data:Data_Vue,
		components:{
			'vue-page':Vpage
		},methods:{
			Call_back:function(page){
				Vm_Call_back_Page(page)
			},List_Edit_Layer:function(id,key){
				console.warn('Vue-function:添加/编辑项目弹框事件 id='+id);
				var title='添加';
				if(id=='add'){
					$('.Js-layer-edit-btn').html('添加')
					this.form=VD_form()
					Layer_Open()
				}
				if(id>0){
					title='编辑';
					$('.Js-layer-edit-btn').html('保存')
					this.form=this.lists[key];
					Layer_Open()
				}
				function Layer_Open(){
					layer_index_edit=layer.open({
						type:1,
						title:title+'优惠券',
						//closeBtn: 0, //不显示关闭按钮
						area: ['400px','380px'], //宽高
						content:$('.Js-layer-edit'),
						cancel:function(){ 
							MJS_URLArry.id='',
							URL_Make(MJS_URLArry)
						}
					});
				}
			},List_Save:function(){
				var tips='添加';
				if(this.form.id > 0){
					tips='编辑';
				}
				var AD_info={
					api:'/adminapi/coupon/save',
					form_data:this.form,
					tips:tips+'优惠券 [ '+this.form.name+' ] 成功',
				}
				if(!this.form.name){
					msgTips(Placeholder_Text('#name'),2)
					$('#name').focus()
					return;
				}
				if(!this.form.money){
					msgTips(Placeholder_Text('#money'),2)
					$('#money').focus()
					return;
				}
				if(!this.form.time){
					msgTips(Placeholder_Text('#time'),2)
					$('#time').focus()
					$('#time').click()
					return;
				}
				postData(AD_info,function(){
					URL_Make(MJS_URLArry)
					Vm_List_Get_Data(vm.page_this)
					layer.close(layer_index_edit)
				})
			},List_Del:function(id,name){
				var tips='删除 [ '+name+' ] 优惠券'
				var AD_del={
					api:'/adminapi/coupon/del',
					form_data:{id:id},
					tips:tips+'成功',
					msg:'是否'+tips+'？',
				}
				Vm_List_Status(AD_del)
			}
		}
	})
	console.log('vm')
	console.log(vm)
	if(MJS_URLArry.id=='add'){
		vm.List_Edit_Layer(MJS_URLArry.id)
	}
	$('#time').daterangepicker({
		format: 'yyyy-MM-dd',
		startDate: Date.today(),
        endDate: Date.today().add({ days: +5 }),
        showDropdowns:true ,
        autoApply:true,
        opens:'left',
		locale:{
			applyLabel: '确定',
			fromLabel: '开始',
			toLabel: '结束',
 			customRangeLabel: 'Custom Range',
			daysOfWeek: ['日', '一', '二', '三', '四', '五','六'],
			monthNames: ['一月', '二月', '三月',  '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月','十二月',],
			firstDay: 1
        },
	},function(start, end) {
		vm.form.time=start.toString('yyyy-MM-dd')+' - '+end.toString('yyyy-MM-dd');
		vm.form.start_time=start.toString('yyyy-MM-dd');
		vm.form.end_time=end.toString('yyyy-MM-dd');
    	console.log(vm)
    });
	$('#time').click(function(){
		$('.dropdown-menu').css({'z-index':'999999999999999'})
		if(!vm.form.time){
			vm.form.time=DateToday()+' - '+DateToday(5);
			vm.form.start_time=DateToday();
			vm.form.end_time=DateToday(5);
		}
	})

}
getData(AD_list,Ajax_Vue_Fun)
</script>
@endsection

@endsection

